<template>
  <div class="app-main-container">
    <div class="app-main-title">
      返佣订单明细
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div>

    <div class="detil_title">
      <span class="text">订单信息</span>
      <span v-if="info.orderBean && info.orderBean.payStatus === '3'" class="status">支付成功</span>
      <span v-if="info.orderBean && info.orderBean.payStatus === '4'" class="status">退款中</span>
      <span v-if="info.orderBean && info.orderBean.payStatus === '5'" class="status">退款成功 </span>
    </div>
    <div class="main_wrap">
      <div class="item">
        <div class="key">订单编号：</div>
        <div class="value">{{ info.orderBean && info.orderBean.orderId }}</div>
      </div>
      <div class="item">
        <div class="key">订单类型：</div>
        <div class="value">{{ info.orderBean && info.orderBean.orderType }}</div>
      </div>
      <div class="item">
        <div class="key">下单时间：</div>
        <div class="value">{{ info.orderBean && info.orderBean.orderTime }}</div>
      </div>
      <!-- <div class="item">
        <div class="key">完成时间：</div>
        <div class="value">{{ info.orderBean && info.orderBean.orderTime }}</div>
      </div> -->
      <div class="item">
        <div class="key">订单金额：</div>
        <div class="value">{{ info.orderBean && info.orderBean.invoiceMoney }}</div>
      </div>
      <div class="item">
        <div class="key">退款金额：</div>
        <div class="value">{{ info.orderBean && info.orderBean.refundMoney }}</div>
      </div>
      <div class="item">
        <div class="key">下单用户：</div>
        <div class="value">{{ info.orderBean && info.orderBean.memberInfo }}</div>
      </div>
    </div>

    <div class="detil_title">
      <span class="text">返佣情况</span>
      <span v-if="info.shareBean && info.shareBean.status === '0'" class="status">待确认</span>
      <span v-if="info.shareBean && info.shareBean.status === '1'" class="status">失效</span>
      <span v-if="info.shareBean && info.shareBean.status === '2'" class="status">已发放</span>
    </div>
    <div class="main_wrap">
      <div class="item">
        <div class="key">任务组：</div>
        <div class="value">{{ info.shareBean && info.shareBean.shareName }}</div>
      </div>
      <div class="item">
        <div class="key">返佣比例：</div>
        <div class="value">{{ info.shareBean && info.shareBean.ratio }}</div>
      </div>
      <div class="item">
        <div class="key">返现用户：</div>
        <div class="value">{{ info.shareBean && info.shareBean.shareMemberInfo }}</div>
      </div>
      <div class="item" />
      <div class="item">
        <div class="key">预计返佣：</div>
        <div class="value">{{ info.shareBean && info.shareBean.taskMoney }}</div>
      </div>
      <div class="item">
        <div class="key">实际返佣：</div>
        <div class="value">{{ info.shareBean && info.shareBean.realMoney }}</div>
      </div>
      <div class="item">
        <div class="key">到账时间：</div>
        <div class="value">{{ info.shareBean && info.shareBean.realSendTime }}</div>
      </div>
      <div class="item" />
      <div class="item">
        <div class="key">操作人：</div>
        <div class="value">{{ info.shareBean && info.shareBean.creater }}</div>
      </div>
      <div class="item">
        <div class="key">备注：</div>
        <div class="value">{{ info.shareBean && info.shareBean.remarks }}</div>
      </div>
    </div>

    <el-table
      :data="info.detials"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table mt30"
    >
      <el-table-column align="center" label="产品名称" prop="goodName" min-width="200" />
      <el-table-column align="center" label="价格" prop="price" min-width="80" />
      <el-table-column align="center" label="数量" prop="num" min-width="200" />
      <el-table-column align="center" label="总价" prop="allPrice" min-width="100" />
    </el-table>
    <div class="detail_bottom">
      <div class="line">订单商品金额：{{ info.allPrice }}元</div>
      <div class="line">优惠金额：{{ info.yhPrice || 0 }}元</div>
      <div class="line danger">实收款： {{ info.realPrice }}元</div>
    </div>

  </div>
</template>

<script>
import { ShareOrderDetail } from '@/api'
export default {
  data() {
    return {
      id: '',
      info: {}
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getInfo()
  },
  methods: {
    getInfo() {
      ShareOrderDetail({ param: { id: this.id }}).then(res => {
        this.info = res.record
      })
    },
    goBack() {
      this.$router.replace('/application/shareModule')
    }
  }
}
</script>

<style lang="scss" scoped>
  .detil_title{
    margin: 30px 0px 20px;
    .text{
      font-weight: 800;
    }
    .status{
      color: #edb36a;
      margin-left: 20px;
    }
  }
  .main_wrap{
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 25%;
      display: flex;
      margin-bottom: 16px;
      .key{
        color: #999999;
      }
    }
  }
  .detail_bottom{
    .line{
      text-align: right;
      margin-top: 20px;
    }
  }
</style>
